<template>
  <div class="download-template">
    <el-button
      v-for="item in templates"
      :key="item.id"
      type="primary"
      link
      icon="Download"
      @click.stop="download(item)"
      >{{ item.friendlyName }}</el-button
    >
  </div>
</template>

<script setup lang="ts">
import { GetTemplates, downloadTemplate } from "@/api/common/other/index";
import { downloadFile } from "@/utils";

const prop = defineProps({
  type: {
    type: Number,
    default: 100,
  },
});
const { type } = toRefs(prop);
const templates = ref<any[]>([]);

const download = (item: any) => {
  downloadTemplate(item.id).then((res) => {
    downloadFile(res);
  });
};

watch(type, () => {
  GetTemplates(type.value).then((res) => {
    if (res.success) {
      templates.value = res.data;
    }
  });
});
onMounted(() => {
  GetTemplates(type.value).then((res) => {
    if (res.success) {
      templates.value = res.data;
    }
  });
});
</script>

<style scoped>
.download-template {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>
